<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->
    <link rel="stylesheet" href="../../css/pop-ups.css"><!--弹出层-->


    <title>产业链详情</title>
    <style>

        .industrial-detail-sn {
            width: 0;
            height: 0;
            border-width: 4px;
            border-style: solid;
            border-color: transparent #D7D7D7 transparent transparent;
            transform: rotate(90deg);
        }

        .industrial-detail-s {
            border-color: transparent #2C68FF transparent transparent;
        }

        .industrial-detail-xn {
            margin-top: 2px;
            width: 0;
            height: 0;
            border-width: 4px;
            border-style: solid;
            border-color: #D7D7D7 transparent transparent transparent;
        }

        .industrial-detail-x {
            border-color: #2C68FF transparent transparent transparent;
        }

        .industrial-detail-line {
            height: 0.14rem;
            width: 100%;
            background-color: #F7F7F7;
        }

        .industrial-detail-tb {
            padding: 0.32rem 0.36rem;
        }

        .industrial-detail-head {
            color: rgba(34, 34, 34, 0.45);
            height: 0.8rem;
        }

        .industrial-detail-change {
            margin-left: 2px;
            margin-top: 3px;
        }

        .industrial-detail-item {
            padding: 0.2rem 0;
            border-bottom: 1px solid #F2F2F2;
            color: #222222;
        }

        .industrial-detail-sz {
            background-color: #4E7EF4;
            padding: 1px 5px;
            color: white;
            border-radius: 2px;
        }

        .industrial-detail-sh {
            background-color: #EF4244;
            padding: 1px 5px;
            color: white;
            border-radius: 2px;
        }

        .industrial-detail-zs {
            color: rgba(34, 34, 34, 0.7);
            margin-left: 0.08rem;
        }

        .industrial-detail-svg {
            width: 1rem;
            height: 0.5rem;
        }

        .industrial-detail-svg svg {
            width: 0.36rem;
            height: 0.36rem;
        }

        .industrial-detail-content {
            padding: 0.2rem 0.28rem;
            background-color: #F7F7F6;
            margin-top: 11px;
            color: rgba(34, 34, 34, 0.7);
        }

        .industrial-detail-tbhead {
            padding: 0 0.36rem;
            position: sticky;
            top: -0.3rem;
            background-color: white;
        }

        .industrial-detail-bottom {
            height: 0.98rem;
            width: 100%;
            border-top: 1px solid #F2F2F2;
        }

        .industrial-detail-op {
            width: 4.94rem;
            height: 100%;
            color: rgba(34, 34, 34, 0.7);
        }

        .industrial-detail-icon {
            color: #2C68FF
        }

        #industrial-detail-cyl{
            border-bottom: 0.14rem solid #F7F7F7
        }

    </style>
</head>
<body>
<div class="flex-column h-100-p bg-white ff400">
    <!--状态栏-->
    <div class="placeholder-top">
        <!--状态栏-->
        <div class="bg-main status-bar "></div>
        <!--导航栏-->
        <div class="bg-main nav-bar flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()">
                <span class="iconfont iconfanhui1 fs16"></span>
            </div>
            <div class="center-bar fs16 ff500 line1"></div>
            <!--<div class="right-bar" onclick="dealShare()">-->
            <!--    <span class="iconfont iconfenxiang1 fs16"></span>-->
            <!--</div>-->
            <div class="right-bar">
            </div>
        </div>
    </div>

    <div class="flex-column flex-1 scoll-y pb30">
        <!--产业链图谱-->
        <div id="industrial-detail-cyl">

        </div>

        <!--<div class="industrial-detail-line">-->

        <!--</div>-->

        <!--相关企业-->
        <div class="industrial-detail-tb">
            <div class="fs16 ff500">相关企业列表</div>
        </div>
        <div class="industrial-detail-tbhead">
            <div class="industrial-detail-head flex-row fs12 align-items-center">
                <div class="flex-row align-items-center" style="width:1.91rem" onclick="sortValue('stockCode',false,0)">
                    <div>代码</div>
                    <div class="industrial-detail-change flex-column justify-content-center">
                        <div class="industrial-detail-sn"></div>
                        <div class="industrial-detail-xn"></div>
                    </div>
                </div>
                <div class="flex-row align-items-center" style="width:1.91rem" onclick="sortValue('corpName',false,1)">
                    <div>名称</div>
                    <div class="industrial-detail-change flex-column justify-content-center">
                        <div class="industrial-detail-sn"></div>
                        <div class="industrial-detail-xn"></div>
                    </div>
                </div>
                <div class="flex-row align-items-center" style="width:1.81rem" onclick="sortValue('score',false,2)">
                    <div>信评</div>
                    <div class="industrial-detail-change flex-column justify-content-center">
                        <div class="industrial-detail-sn"></div>
                        <div class="industrial-detail-xn"></div>
                    </div>
                </div>
                <div style="width:1.61rem">主要业务产品</div>
            </div>
        </div>
        <div class="" style="padding:0 0.36rem">
            <div class="industrial-detail-container flex-column">

            </div>
        </div>
    </div>
    <div class="industrial-detail-bottom flex-row justify-content-center">
        <div class="industrial-detail-op  flex-row justify-content-between">
            <!--<div class="flex-column justify-content-center align-items-center" onclick="dealShare()">-->
            <div class="flex-column justify-content-center align-items-center">
                <!--<div>-->
                <!--    <span class="industrial-detail-icon iconfont iconfenxiang1 fs16"></span>-->
                <!--</div>-->
                <!--<div class="fs10">分享</div>-->
            </div>

            <div class="flex-column justify-content-center align-items-center" onclick="reduction()">
                <div>
                    <span class="industrial-detail-icon iconfont iconhuanyuan-01 fs16"></span>
                </div>
                <div class="fs10">还原</div>
            </div>

            <div class="flex-column justify-content-center align-items-center">
                <!--<div>-->
                <!--    <span class="industrial-detail-icon iconfont iconbaocun fs16"></span>-->
                <!--</div>-->
                <!--<div class="fs10">保存</div>-->
            </div>

            <!--<div class="flex-column justify-content-center align-items-center" onclick="reduction()">-->
            <!--    <div>-->
            <!--        <span class="industrial-detail-icon iconfont iconhuanyuan-01 fs16"></span>-->
            <!--    </div>-->
            <!--    <div class="fs10">还原</div>-->
            <!--</div>-->

        </div>

    </div>


</div>
</body>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/date.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../../js/template.js"></script>

<!--产业链绘图JS-->
<script src="../../js/lodash.min.4.17.11.js"></script>
<script src="../../js/vis-network.min.js"></script>
<script src="../../js/vue.min.js"></script>
<script src="../../js/color.js"></script>
<script src="../../js/vis.js"></script>
<script src="../../js/industryChainGraph.js"></script>
<!--产业链绘图JS-->


<script>

  let pm = {
    stockCode: false,
    corpName: false,
    score: true
  }
  let xgqy = {}
  let xgqyCopy = {}

  function initPage(params) {
    Utils.sbhAdaptive()
    pm.chainCode = params.menuCode
    $('.center-bar').html(params.name ? params.name : '' + '产业链')
    //产业链 https://jt2.jd.com/api/sam/chainIndustry/v2/queryMasterGraph
    //相关企业列表  https://jt2.jd.com/api/sam/chainIndustryEnt/vertexEntBasicInfo
    queryMasterGraph() // 产业链详情图谱
    vertexEntBasicInfo() //相关企业列表
  }

  function reLoadPage() {
    // 产业链详情图谱
    queryMasterGraph()
    //相关企业列表
    vertexEntBasicInfo()
  }

  // 产业链详情图谱
  function queryMasterGraph() {
    Server.industrialDetail.queryMasterGraph({
      chainCode: pm.chainCode
    }).then(function (res) {
      new IndustryChainGraph('#industrial-detail-cyl', {
        data: res,
        width: '100%',
        height: '7.5rem'
      })
    })
  }

  // 相关企业列表
  function vertexEntBasicInfo() {
    Server.industrialDetail.vertexEntBasicInfo({
      chainCode: pm.chainCode
    }).then(function (res) {
      xgqy = JSON.parse(JSON.stringify(res))
      xgqyCopy = JSON.parse(JSON.stringify(res))
      sortValue('score',true,2)
      $('.industrial-detail-tbhead .industrial-detail-sn').removeClass('industrial-detail-s')
      $('.industrial-detail-tbhead .industrial-detail-xn').removeClass('industrial-detail-x')
    })
  }

  function dealData() {
    let htmlStr = ''
    xgqy.data.forEach(function (item) {
      htmlStr += '<div class=\'industrial-detail-item flex-column justify-content-center\'>'
      htmlStr += '<div>'
      htmlStr += '<div class=\'flex-row align-items-center\'>'
      htmlStr += '<div class=\'flex-row align-items-center\' style=\'width:1.91rem;\'>'
      let stock = item.stockCode.split('.')
      if (stock.length === 2) {
        htmlStr += '<div class=\'industrial-detail-' + (stock[1] === 'SH' ? 'sh' : 'sz') + ' fs10 flex-row align-items-center justify-content-center\'><span style="line-height: .20rem;height: .20rem">' + stock[1] + '</span></div>'
        htmlStr += '<div class=\'industrial-detail-zs\'>' + stock[0] + '</div>'
      } else {
        htmlStr += '<div class=\'industrial-detail-zs\'>' + item.stockCode + '</div>'
      }
      htmlStr += '</div>'
      htmlStr += '<div style=\'width:1.91rem;\'>' + item.corpName + '</div>'
      if (item.score) {
        htmlStr += '<div style=\'width:1.81rem;\'>' + parseFloat(item.score).toFixed(2) + '分</div>'
      } else {
        htmlStr += '<div style=\'width:1.81rem;\'>--</div>'
      }

      htmlStr += '<div class=\'flex-row justify-content-end ta-right\' style=\'width:1.61rem;\'>'
      htmlStr += '<div class=\'industrial-detail-svg\' onclick=\'showContent(this)\'>'
      htmlStr += '<svg class=\'icon\' aria-hidden=\'true\'>'
      htmlStr += '<use xlink:href=\'#iconzhankai-01\'/>'
      htmlStr += '</svg>'
      htmlStr += '</div>'
      htmlStr += '</div>'
      htmlStr += '</div>'
      htmlStr += '</div>'
      htmlStr += '<div class=\'industrial-detail-content\' style=\'display: none\'>' + item.primaryBusiness + '</div>'
      htmlStr += '</div>'
    })
    $('.industrial-detail-container').html(htmlStr)
  }

  // 点击主要业务产品展示内容
  function showContent(o) {
    $('.industrial-detail-svg').html('<svg class=\'icon\' aria-hidden=\'true\'><use xlink:href=\'#iconzhankai-01\'></use></svg>')
    let t = $(o).parent().parent().parent().parent()
    let isShow = false
    if (t.find('.industrial-detail-content').css('display') === 'none') { // 如果原来是关闭状态就打开，如果是打开状态就关闭
      isShow = true
      $(o).html('<svg class=\'icon\' aria-hidden=\'true\'><use xlink:href=\'#iconshouqi-01\'></use></svg>')
    } else {
      t.find('.industrial-detail-content').hide()
    }
    $('.industrial-detail-content').hide()
    if (isShow) {
      t.find('.industrial-detail-content').show()
    }
  }

  //分享
  function dealShare() {
    let item = {
      title: 'title',
      content: 'content',
      url: dict.SHARE_HOST + 'app/common/index.html#/index?id=' + pm.infoId + '&type=' + pm.infoType + '&version=' + dict.version,
      image: 'image',
      type: 'url'
    }
    Template.shareWindow(item)
  }

  function compare(property) {
    if(property === 'score'){
      return function (a, b) {
        let value1 = a[property] || 0
        let value2 = b[property] || 0
        return value1 - value2
      }
    } else{
      return function (a, b) {
        return  a[property].localeCompare(b[property])
      }
    }
  }

  function sortValue(val, isReverse, num) {
    xgqy.data = JSON.parse(JSON.stringify(xgqyCopy.data))
    if (pm[val]) {
      xgqy.data.sort(compare(val)).reverse()
    } else {
      xgqy.data.sort(compare(val))
    }
    $('.industrial-detail-tbhead .industrial-detail-sn').removeClass('industrial-detail-s')
    $('.industrial-detail-tbhead .industrial-detail-xn').removeClass('industrial-detail-x')
    if (pm[val]) {
      $('.industrial-detail-change').eq(num).find('.industrial-detail-xn').addClass('industrial-detail-x')
    } else {
      $('.industrial-detail-change').eq(num).find('.industrial-detail-sn').addClass('industrial-detail-s')

    }
    pm[val] = !pm[val]
    dealData()
  }

  function reduction() {
    pm = {
      stockCode: false,
      corpName: false,
      score: true
    }

    xgqy.data = JSON.parse(JSON.stringify(xgqyCopy.data))
    sortValue('score',true,2)
    dealData()
    $('.industrial-detail-tbhead .industrial-detail-sn').removeClass('industrial-detail-s')
    $('.industrial-detail-tbhead .industrial-detail-xn').removeClass('industrial-detail-x')
    // vertexEntBasicInfo()
  }


</script>
</html>
